<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/mui.min.css" th:href="@{/web/css/mui.min.css}">
	<link rel="stylesheet" href="css/home.css" th:href="@{/web/css/home.css}">
	<link rel="stylesheet" type="text/css" href="css/icons-extra.css" th:href="@{/web/css/icons-extra.css}"/>
	<link rel="stylesheet" type="text/css" href="css/app.css" th:href="@{/web/css/app.css}"/>
	<title>购物车</title>
	<link href="favicon.ico" type="image/x-icon" rel="icon">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
</head>
<body>



<header class="mui-bar mui-bar-nav aui-header b-line">
	<!--<a class="mui-action-back mui-icon mui-icon-search mui-pull-left"></a>-->
	<h1 class="mui-title">购物车</h1>
	<a class="mui-icon mui-icon-trash mui-pull-right"></a>
</header>
<div class="mui-content" >


	<form th:action="@{/web/createOrder}" method="post" id="formlist">

	<!--/*@thymesVar id="bean" type="com.example.demo.shops.bean.CarBean"*/-->
	<div class="aui-img-clear" style="padding-top:15px" th:each="bean:${carlist}" th:object="${bean}">
		<div class="title mui-input-row mui-checkbox mui-left b-line">
			<input name="checkbox" th:value="*{id}" type="checkbox" checked class="mycheckbox" >
			<em class="ss-aui">&nbsp;</em>
		</div>

		<ul class="mui-table-view mui-table-view myitem"  >

			<li class="mui-table-view-cell  mui-table-view-cell mui-media b-line" >
				<!--<div class=" mui-input-row mui-checkbox mui-left">-->
					<!--<input name="checkbox" value="Item 1" type="checkbox" >-->
				<!--</div>-->
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red">删除</a>
				</div>
				<div class="mui-slider-handle mui-table">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="images/ad1.jpg" th:src="@{/upload/__${bean.headimg}__}">
						<div class="mui-media-body">
							<p th:text="*{price}">¥112.50</p>
							<p class="mui-ellipsis" th:text="*{name}">春季新款韩版小清新百搭短款重工花朵刺绣修身显瘦夹克牛仔外套</p>
							<input type="hidden" th:value="*{number}">
							<p class="price" th:text="'数量: '+ *{number}" >数量：2</p>
						</div>
					</a>
				</div>
			</li>

		</ul>
	</div>
	</form>
	<!--<div class="devider "></div>-->

</div>


<div style="height:50px"></div>
<nav class="mui-bar mui-bar-tab" style="bottom:50px">
	<div class="t-line aui-on-cell">
		<div class="title mui-input-row mui-checkbox mui-left" style="position:absolute; top:9px"><input name="checkbox" value="Item 1" type="checkbox" id="allcheck" checked><em class="ss-aui">全选</em></div>

		<div class="aui-onc">
			<p style="display:inline-block"><span style="color:#fb4545" id="allprice" th:text="'合计:¥'+${allprice}">合计：¥112.50 </span></p>
			<a href="#" class="aui-got" id="ok">去结算</a>
		</div>
	</div>



</nav>
<nav class="mui-bar mui-bar-tab">
	<div class="t-line">
		<a class="aui-tab-item" href="index.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="aui-tab-item " href="category.html">
			<span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
			<span class="mui-tab-label">分类</span>
		</a>
		<a class="aui-tab-item mui-active" href="car.html">
			<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="aui-tab-item" href="me.html">
			<span class="mui-icon mui-icon-extra mui-icon-extra-people"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</div>

</nav>
<script src="js/mui.min.js" th:src="@{/web/js/mui.min.js}"></script>
<script>



    mui.init();
    (function($) {

        document.getElementById("ok").addEventListener('tap',function () {
            document.getElementById("formlist").submit();
        })


        function countprict(){
//        alert("计算价格");
            var boxlist = $('.mycheckbox');
            var allprice = 0
            boxlist.each(function () {
                var ele = this;
                if (ele.checked) {
                    var number = ele.parentNode.parentNode.childNodes[3].childNodes[1].childNodes[5].childNodes[1].childNodes[3].childNodes[1].innerHTML
                    var price = ele.parentNode.parentNode.childNodes[3].childNodes[1].childNodes[5].childNodes[1].childNodes[3].childNodes[5].value
                    allprice += number * price
                }
            })
			$('#allprice')[0].textContent = '合计:¥'+allprice
        }

		document.getElementById("allcheck").addEventListener('change',function (e) {

            var boxlist = $('.mycheckbox');
            if(e.target.checked) {
                boxlist.each(function () {
                    var ele = this;
                    ele.checked = true
                })

            }else{
                boxlist.each(function(){
                    var ele = this;
                    ele.checked = false
				})


			}

            countprict();
        })


		$('.mui-content').on('change','.mycheckbox',function () {
            countprict();
        })
        //$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
        //$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
        //				setTimeout(function() {
        //					$.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');
        //					setTimeout(function() {
        //						$.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));
        //					}, 1000);
        //				}, 1000);
        //第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
        $('.myitem').on('tap', '.mui-btn', function(event) {
            var elem = this;
            var li = elem.parentNode.parentNode.parentNode.parentNode;
            console.log(li)
            mui.confirm('确认删除该商品吗？', '删除商品', btnArray, function(e) {
                if (e.index == 0) {
                    li.parentNode.removeChild(li);
                    countprict()
                } else {
                    setTimeout(function() {
                        $.swipeoutClose(li);
                    }, 0);
                }
            });
        });
        var btnArray = ['确认', '取消'];
//        //第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑
//        $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
//            var elem = this;
//            mui.confirm('确认删除该商品吗？', '删除商品', btnArray, function(e) {
//                if (e.index == 0) {
//                    elem.parentNode.removeChild(elem);
//                } else {
//                    setTimeout(function() {
//                        $.swipeoutClose(elem);
//                    }, 0);
//                }
//            });
//        });
        //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑
//        $('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
//            var elem = this;
//            mui.confirm('确认删除该商品吗？', '删除商品', btnArray, function(e) {
//                if (e.index == 0) {
//                    elem.parentNode.removeChild(elem);
//                } else {
//                    setTimeout(function() {
//                        $.swipeoutClose(elem);
//                    }, 0);
//                }
//            });
//        });


    })(mui);


</script>
<script type="text/javascript" charset="utf-8">
//    mui.init({
//        swipeBack:true //启用右滑关闭功能
//    });
//    var slider = mui("#slider");
//    document.getElementById("switch").addEventListener('toggle', function(e) {
//        if (e.detail.isActive) {
//            slider.slider({
//                interval: 5000
//            });
//        } else {
//            slider.slider({
//                interval: 0
//            });
//        }
//    });

//	document.getElementById("allcheck").addEventListener('tap',function(e){
//	    console.log("------fsdfds")
//        mui("#checkbox").checked;
//	})



//    mui("#allcheck").on("tap",function(){
//       console.log("hhhhhhhhhh")
//        mui("#checkbox").checked;
//	})
</script>
<script>
//    mui.init();
</script>


</body>
</html>